<template>
  <div>
    <!--底部-->
    <div class="bottom">
      <!--foot开始-->
      <div class="foot">
        <!--关于-->
        <div id="about">
          <dl style="cursor: pointer">
            <dt><a href="">关于欢太</a></dt>
            <dt><a href="">了解欢太</a></dt>
            <dt><a href="">欢太产品与服务</a></dt>
            <dt><a href="">联系我们</a></dt>
          </dl>
        </div>
        <!--OPPO产品-->
        <div id="oppo">
          <dl>
            <dt>OPPO产品</dt>
            <dt><a href="">OPPO产品</a></dt>
            <dt><a href="">OPPO Reno6</a></dt>
            <dt><a href="">OPPO Reno6 Pro</a></dt>
            <dt><a href="">OPPO Reno6 Pro+</a></dt>
            <dt><a href="">OPPO Find X3</a></dt>
            <dt><a href="">OPPO Reno5</a></dt>
            <dt><a href="">OPPO K9</a></dt>
            <dt><a href="">OPPO K7x</a></dt>
            <dt><a href="">OPPO A95</a></dt>
            <dt><a href="">OPPO A93</a></dt>
          </dl>
        </div>
        <!--一加产品-->
        <div id="yija">
          <dl>
            <dt>一加产品</dt>
            <dt><a href="" class="ssss">OnePlus 9 Pro</a></dt>
            <dt><a href="" class="ssss">OnePlus 9</a></dt>
            <dt><a href="" class="ssss">OnePlus 9R</a></dt>
            <dt><a href="" class="ssss">OnePlus 8T</a></dt>
            <dt><a href="" class="ssss">OnePlus 8</a></dt>
            <dt><a href="" class="ssss">OnePlus 8 Pro</a></dt>
            <dt><a href="" class="ssss">OnePlus Watch</a></dt>
          </dl>
        </div>
        <!--realme产品-->
        <div id="realme">
          <dl>
            <dt>reamle产品</dt>
            <dt><a href="">真我GT Neo 闪速版</a></dt>
            <dt><a href="">真我X7 Pro 至尊版</a></dt>
            <dt><a href="">真我Q3 Pro 狂欢版</a></dt>
            <dt><a href="">真我Q3 Pro 狂欢版</a></dt>
            <dt><a href="">真我V15</a></dt>
            <dt><a href="">真我Buds Air 2 Neo</a></dt>
          </dl>
        </div>
        <!--服务政策-->
        <div id="service">
          <dl>
            <dt>服务政策</dt>
            <dt><a href="">OPPO售后政策</a></dt>
            <dt><a href="">一加售后政策</a></dt>
            <dt><a href="">realme售后政策</a></dt>
            <dt><a href="">配送发货说明</a></dt>
            <dt><a href="">花呗分期说明</a></dt>
            <dt><a href="">电子发票说明</a></dt>
          </dl>
        </div>
        <!--在线客服部分-->
        <div class="contact">
          <a href="#">在线客服</a>
          <img src="~assets/img/kefu.png"/>
        </div>
        <!--电话-->
        <div id="phone">
          <p style="font-size:20px">400-1999-666</p>
          <p style="font-size: 15px;">24&nbsp;小时全国热线</p>
        </div>
        <!--版权所有-->
        <div class="copyright" style="clear: left;">
          <p>
            <a href="">
              &copy;2021 欢太 版权所有 粤ICP备14012291号 | 隐私政策 | 用户使用协议 | 资质证照 | 知识产权
            </a>
          </p>
          <img src="~assets/img/jinghui.png"/>
          <p class="gw">
            <a href="#">粤公网安备 44190002004935号</a>
          </p>
        </div>
      </div>
      <!--foot结束-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "footNva"
  }
</script>

<style scoped>
  /*去除超链接下划线*/
  a:link {
    text-decoration: none;
  }
  /*去掉网页两边空白*/
  html body{
    width: 100%;
    margin-left:0;
    margin-right:0;
    overflow-x:hidden
  }
  .header {
    position: relative;
  }
  /*网页底部样式*/
  .bottom {
    position: relative;
  }
  .foot {
    position: absolute;
  }
  .foot div{
    margin-top: 3%;
  }
  .bottom div {
    float: left;
    /*字体大小*/
    font-size: 14px;
    color: gray;
    margin-left: 100px;
    /*行距*/
    line-height: 28px;
    cursor: pointer;
  }
  /*超链接样式*/
  .bottom dl a {
    font-size: 14px;
    color: gray;
  }
  .bottom dl a:hover{
    color: silver;
  }
  /*鼠标放上去变化*/
  .contact a:hover {
    background-color: #464646;
    color: ghostwhite;
  }
  /*在线客服*/
  .contact a{
    display: block;/*让a标签变成块元素并设置宽高*/
    width: 180px;
    height: 55px;
    background-color: #666666;
    border-radius: 30px;
    text-align: center; /*居中对齐*/
    line-height: 55px;  /*行高*/
    letter-spacing:2px;/*字间距*/
    color: gainsboro;
    font-size: 18px;
    font-family:Microsoft YaHei ;
    /*位置*/
    padding-left: 10%;
    margin-top: 10%;
    margin-left: 25%;
  }
  /*在线客服图片位置*/
  .contact img {
    width: 40px;
    height: 40px;
    float: left;
    padding-left: 34%;
    margin-top: -26%;
  }
  /*电话样式*/
  #phone {
    margin-top:8%;
    margin-left: -6%;
    text-align: right;
    line-height: 10px;
  }
  /*版权信息样式*/
  .copyright {
    margin-top: 8%;
    width: 1100px;
    border-top:1px solid gainsboro;
  }
  .copyright p a{
    font-size: 12px;
    margin-left: 28%;
    text-align: center;
    color:gray ;
  }
  /*警徽图片位置*/
  .copyright img {
    margin-left: 40%;
  }
  .gw {
    margin-left: 20%;
    margin-top: -3%;
  }
</style>
